<template>
  <view class="avatar-demo">
    <view class="header">
      <text class="title">头像组件演示</text>
    </view>
    
    <view class="section">
      <text class="section-title">基本用法</text>
      <view class="demo-item">
        <AvatarImage src="默认头像" />
        <text class="item-desc">默认大小(100rpx)</text>
      </view>
    </view>
    
    <view class="section">
      <text class="section-title">不同大小</text>
      <view class="flex-row">
        <view class="demo-item">
          <AvatarImage src="默认头像" size="60" />
          <text class="item-desc">小(60rpx)</text>
        </view>
        <view class="demo-item">
          <AvatarImage src="默认头像" size="100" />
          <text class="item-desc">中(100rpx)</text>
        </view>
        <view class="demo-item">
          <AvatarImage src="默认头像" size="160" />
          <text class="item-desc">大(160rpx)</text>
        </view>
      </view>
    </view>
    
    <view class="section">
      <text class="section-title">不同形状</text>
      <view class="flex-row">
        <view class="demo-item">
          <AvatarImage src="默认头像" size="100" shape="circle" />
          <text class="item-desc">圆形</text>
        </view>
        <view class="demo-item">
          <AvatarImage src="默认头像" size="100" shape="square" />
          <text class="item-desc">方形</text>
        </view>
      </view>
    </view>
    
    <view class="section">
      <text class="section-title">带边框</text>
      <view class="flex-row">
        <view class="demo-item">
          <AvatarImage src="默认头像" size="100" borderColor="#1890ff" borderWidth="2" />
          <text class="item-desc">蓝色边框</text>
        </view>
        <view class="demo-item">
          <AvatarImage src="默认头像" size="100" borderColor="#f5222d" borderWidth="2" />
          <text class="item-desc">红色边框</text>
        </view>
        <view class="demo-item">
          <AvatarImage src="默认头像" size="100" borderColor="#52c41a" borderWidth="4" />
          <text class="item-desc">绿色粗边框</text>
        </view>
      </view>
    </view>
    
    <view class="section">
      <text class="section-title">加载实际头像</text>
      <view class="flex-row">
        <view class="demo-item" v-if="userAvatar">
          <AvatarImage :src="userAvatar" size="120" />
          <text class="item-desc">当前用户头像</text>
        </view>
      </view>
      
      <view class="upload-section" v-if="canUpload">
        <button class="upload-btn" @click="chooseAndUploadAvatar">上传新头像</button>
      </view>
    </view>
  </view>
</template>

<script>
import helper from '../../utils/helper.js';
import AvatarImage from '../../components/AvatarImage.vue';

export default {
  components: {
    AvatarImage
  },
  data() {
    return {
      userAvatar: '',
      canUpload: true
    };
  },
  onLoad() {
    // 尝试获取当前用户头像
    this.getUserAvatar();
  },
  methods: {
    // 获取当前用户头像
    async getUserAvatar() {
      try {
        // 这里可以调用接口获取用户头像
        // 示例代码，实际项目中应替换为真实获取用户信息的接口
        const user = await helper.getUser();
        if (user && user.avatar) {
          this.userAvatar = user.avatar;
        }
      } catch (error) {
        console.error('获取用户头像失败', error);
      }
    },
    
    // 选择并上传头像
    async chooseAndUploadAvatar() {
      try {
        // 从相册选择图片
        const filePath = await helper.chooseImage();
        
        // 显示上传中提示
        uni.showLoading({
          title: '上传中...'
        });
        
        // 上传图片
        const result = await helper.uploadAvatar(filePath);
        
        // 隐藏加载提示
        uni.hideLoading();
        
        if (result && result.md5) {
          this.userAvatar = result.md5;
          uni.showToast({
            title: '上传成功',
            icon: 'success'
          });
        } else {
          throw new Error('上传失败');
        }
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: '上传失败',
          icon: 'error'
        });
        console.error('上传头像失败', error);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.avatar-demo {
  padding: 30rpx;
  
  .header {
    text-align: center;
    margin-bottom: 40rpx;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
    }
  }
  
  .section {
    margin-bottom: 40rpx;
    
    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      display: block;
    }
    
    .flex-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    
    .demo-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 40rpx;
      margin-bottom: 20rpx;
      
      .item-desc {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #666;
      }
    }
    
    .upload-section {
      margin-top: 30rpx;
      
      .upload-btn {
        background-color: #1890ff;
        color: #fff;
        font-size: 28rpx;
        padding: 10rpx 30rpx;
        border-radius: 6rpx;
      }
    }
  }
}
</style> 